<template>
  <a-drawer :open="visible" title="换货单详情" @close="onClose">
    <template #closeIcon>
      <close @on-close="onClose" />
    </template>
    <a-card size="small" title="基本信息">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="单据编号">{{ options.no }}</a-descriptions-item>
        <a-descriptions-item label="门店名称">{{ options.store?.store_name }}</a-descriptions-item>
        <a-descriptions-item label="片区名称">{{ options.store?.region?.name }}</a-descriptions-item>
        <a-descriptions-item label="业务员名称">{{ options.salesman?.rename }}</a-descriptions-item>
        <a-descriptions-item label="出库仓库">{{ options.warehouse?.name }}-{{ getDescByValue('WAREHOUSE_ATTRIBUTE_TYPE', options.warehouse?.attribute_type) }}</a-descriptions-item>
        <a-descriptions-item label="退回仓库">{{ options.returnWarehouse?.name }}-{{ getDescByValue('WAREHOUSE_ATTRIBUTE_TYPE', options.returnWarehouse?.attribute_type) }}</a-descriptions-item>
        <a-descriptions-item label="订单状态">
          <span>{{ getDescByValue('PROGRESS_STABAR_ENUM', options.status) }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="结算方式">
          <span>{{ getDescByValue('RECEIVE_TYPE_ENUM', options.payment_type) }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="订单来源">
          <span>{{ getDescByValue('UNSETYLED_TYPE_ENUM', options.source) }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="备注">{{ options.remark }}</a-descriptions-item>
        <a-descriptions-item label="单据日期">{{ options.create_time }}</a-descriptions-item>
        <!-- <a-descriptions-item label="创建者">{{ options.creator?.username }}</a-descriptions-item> -->
        <a-descriptions-item label="打印次数">{{ options?.printLog?.print_count }}</a-descriptions-item>
        <a-descriptions-item label="最近打印时间">{{ options?.printLog?.update_time }}</a-descriptions-item>
        <a-descriptions-item label="最近打印人">{{ options?.printLog?.printerName }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card size="small" title="签收信息" class="smart-margin-bottom10" style="margin-top: 10px">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="结算方式">{{ PaymentType[options?.sign?.payment_type] }}</a-descriptions-item>
        <a-descriptions-item label="收款方式">{{ PaymentModel[options?.sign?.payment_model] }}</a-descriptions-item>
        <a-descriptions-item label="应收金额">{{ options?.sign?.receivable_amount }}</a-descriptions-item>
        <a-descriptions-item label="签收金额">{{ options?.sign?.sign_amount }}</a-descriptions-item>
        <a-descriptions-item label="备注">{{ options?.sign?.remark }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="smart-margin-top10" size="small" :tab-list="tabList" :active-tab-key="activeKey" @tabChange="(key) => (activeKey = key)">
      <template #customTab="{ tab }">
        <span class="ant-card-head-title" :style="compactModeClass">
          {{ tab }}
        </span>
      </template>
      <template v-if="activeKey === 'Inventory'">
        <BarterInventoryTable :enterpriseId="options.detail" />
      </template>
      <template v-if="activeKey === 'log'">
        <BarterTracerTimeline :tableData="options.relatedLog" />
      </template>
    </a-card>
    <template #footer>
      <a-button @click="onClose">取消</a-button>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BarterTracerTimeline from './barter-tracer-timeline.vue'
import BarterInventoryTable from './barter-Inventory-table.vue'
import { useEnums } from '@/hooks/plugins/useEnums'
import { inject } from 'vue'
import close from '@/components/framework/close/index.vue'
const compactModeClass = inject('compactModeClass')
const { getDescByValue } = useEnums()
defineExpose({
  showDrawer
})
const emit = defineEmits(['refresh'])

const enum PaymentType {
  '现结' = 1,
  '欠款',
  '预付款',
  '0元赠',
  '押金'
}

const enum PaymentModel {
  '现金' = 1,
  '微信',
  '支付宝',
  '公司账户'
}

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false)
// 详情
const options = ref({})
// 详情tab
const activeKey = ref('Inventory')
const tabList = [
  {
    key: 'Inventory',
    tab: '商品明细'
  },
  {
    key: 'log',
    tab: '日志记录'
  }
]

function showDrawer(item) {
  options.value = item
  visible.value = true
}

const onClose = () => {
  visible.value = false
}
</script>
